<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/mobile/need/layer.css" rel="stylesheet">
    <script src="https://www.layuicdn.com/auto/layui.js" v="2.5.6" e="layui"></script>
    <link rel="stylesheet" href="static/css/style.css">
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div id="cvv">
    <!--顶栏-->
    <header>

        <div style="float: right">
            <i  class="layui-icon  layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; color: #969baa;">&#xe614;</i>&nbsp; &nbsp; &nbsp;
        </div>
    </header>

    <div class="main" id="app">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" id="userName" name="userName" class="layui-input" placeholder="请输入要查询的课程名" autocomplete="off">
                </div>
                <button class="layui-btn layui-btn-md layui-btn-normal" lay-submit lay-filter="queryUser">查询</button>
            </div>
            <table class="layui-hide" lay-filter="Table" id="Table"></table>
            <div  id="Bar" style="display: none;">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>
        </div>
    </div>
</div>

<!--弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>修改课程信息</legend>
    </fieldset>
    <form action="" class="layui-form" method="post" lay-filter="dataFrm" id="dataFrm">
        <input type="hidden" name="k_id" >
        <div class="layui-form-item">
            <div class="layui-dv">
                <label class="layui-form-label">编号:</label>
                <div class="layui-input-dv">
                    <input type="text" name="k_num"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-dv">
                <label class="layui-form-label">课程名字:</label>
                <div class="layui-input-dv">
                    <input type="text" name="k_name"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-dv">
                <label class="layui-form-label">课程时间:</label>
                <div class="layui-input-dv">
                    <input type="text" name="k_time"  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-dv">
                <label class="layui-form-label">教学教练</label>
                <div class="layui-input-dv">
                    <select name="j_name"  id="sel" lay-filter="test">

                    </select>
                </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="sub" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['layer','table','form'],function () {
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        //基础效果


        table.render({
            elem: '#Table'   //渲染的目标对象
            , url: '/course/selectk' //数据接口
            , id:'contenttable'
            , title: '课程'//数据导出来的标题
            , toolbar: "#ToolBar"
            , height: 'full-350'
            , cellMinWidth: 100 //设置列的最小默认宽度
            , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
            , limit: 10  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            , done: function (res, curr, count) {
            }
            , page: true  //是否启用分页
            , cols: [[   //列表数据
                {type: 'checkbox', fixed: 'left'}
                , {field: 'k_num', title: '编号', sort: true, align: 'center'}
                , {field: 'k_name', title: '课程名字', align: 'center'}
                , {field: 'k_time', title: '课程时间(小时)', align: 'center'}
                , {field: 'j_name', title: '教练', align: 'center'}
                , {fixed: 'right', title: '操作', toolbar: '#Bar', width: 220, align: 'center'}
            ]]
        })




        table.on("tool(Table)",function (obj){
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/course/deletek",
                        type: "POST",
                        data: {'id': data.k_id},
                        dataType: "json",
                        success: function (data) {
                            if (data == null) {
                                layer.msg("删除失败", {icon: 5});
                            } else {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                                layer.closeAll();
                                parent.location.reload();
                                Load();
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                openUpdatecomm(data);
            }
        });



        function openUpdatecomm(data){
            mainIndex=layer.open({
                type:1,
                title:'修改课程信息',
                content:$("#saveOrUpdateDiv"),
                area:['1200px','600px'],
                success:function (index){
                    form.val("dataFrm",data)
                }
            })
        }




        form.on('submit(sub)', function (obj) {
            var params = $("#dataFrm").serialize();
            params = decodeURIComponent(params, true);
            $.ajax({
                type: "post",
                url: "/course/updatek",
                data: params,
                success: function (data) {
                    if (data.trim() === "1") {
                        //关闭弹出层
                        layer.close(mainIndex)
                        //关闭弹出层后刷新当前页面
                        setTimeout('window.location.reload()', 500);
                        layer.msg("修改成功")
                    } else {
                        layer.msg("失败")
                    }
                }
            })
        })




        form.on('submit(queryUser)', function(data){
            var userName=$("#userName").val(); //得到搜索栏的值
            if (userName==''){
                setTimeout('window.location.reload()', 100);
            }
            //执行重载
            table.reload('contenttable', {
                url:'/course/selectbykname',
                where: {kname:userName}     //传给后台数据并重载
            });
        });




        $(function () {
            $.ajax({
                type: "post",
                url: "/coach/selectname",
                success: function (data) {
                    var dv = JSON.parse(data);
                    for(var i=0;i<dv.length;i++){
                        console.log(dv[i]);
                        $("#sel").append("<option value='"+dv[i]+"' >"+dv[i]+"</option>");
                        form.render('select')
                    }

                }

            })

        })



    })
</script>
<!--给会员等级上色-->

<script src="static/js/config.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>